<!--轴-->
<div *ngIf='chartType=="line"||chartType=="pie"||chartType=="chinaMap"'>
    <label class="col-sm-2 control-label">
        {{'CONFIG.WIDGET.VALUE_AXIS'|translate}}
        <i class="fa fa-plus-square" title="{{'CONFIG.WIDGET.ADD_NEW_AXIS'|translate}}" (click)='add_pie_value()' style="cursor: pointer;" *ngIf="curWidget.config.values.length<2"></i>
    </label>
    <!-- <div class="col-sm-10" [ngStyle]="'height:{{ curWidget.config.values.length * 45}}px'"> -->
      <div class='col-sm-10' [ngStyle]="{'height':curWidget.config.values.length * 45}">
        <table class="table table-bordered">
            <tr *ngFor="let v of curWidget.config.values">
                <td style="padding: 1px 3px">
                    {{v.series_type}}
                    <select class="form-control" [(ngModel)]="v.series_type" style="width: 150px; padding: 0px;" (change)="typeValue(v.series_type)">
                      <!-- <option *ngFor='type.value as type.name for type in value_pie_types' [value]=''></option> -->
                      <option *ngFor='let type of value_series_types' [value]='type.value'>{{type.name}}</option>
                    </select>
                </td>
                <td dnd-list="v.cols" dnd-inserted="dndTransfer.toCol(v.cols,index,item,type)"
                    dnd-allowed-types="['measure','select','col','exp']"
                    [ngClass]="{highlight:dragEl}"
                    style="width: 100%; padding: 1px 3px">
                    <!-- <div class="dndPlaceholder sort-highlight"
                         style="height: 24px; width: 93px;margin: 3px 3px;display: inline-block;vertical-align: middle;">
                    </div> -->
                    <div *ngFor="let o of v.cols" dnd-draggable="o" dnd-type="o.type=='exp'?'exp':'col'" dnd-effect-allowed="move" dnd-moved="v.cols.splice($index, 1)" class="btn-group" style="margin: 3px 3px;">
                        <!-- <ng-switch on="o.type">
                            <div ng-switch-when="exp" class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm" style="cursor: move;" (click)="v.cols.splice($index, 1);">
                                    {{o.alias}}
                                </button>
                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                        (click)="editSort(o);cleanRowSort(o);">
                                    <span class="fa" ng-class="{undefined:'fa-sort','asc':'fa-sort-asc','desc':'fa-sort-desc'}[o.sort]"></span>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                                    <span class="fa fa-edit"></span>
                                </button>
                                <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                                    <li ng-if="!isDsExpression(o)">
                                        <a (click)="editExp(o)">{{'COMMON.EDIT'|translate}}</a>
                                    </li>
                                    <li>
                                        <a (click)="editVFilter(o)">{{'CONFIG.WIDGET.FILTER'|translate}}</a>
                                    </li>
                                </ul>
                            </div>
                            <div ng-switch-default class="btn-group">
                                <button type="button"
                                        (click)="v.cols.splice($index, 1);"
                                        class="btn btn-default btn-sm" style="cursor: move;">
                                    {{o.aggregate_type+'('+o.col+')'+ (o.alias?(' -> '+o.alias):'')}}
                                </button>
                                <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                                        (click)="editSort(o);cleanRowSort(o);">
                                    <span class="fa" ng-class="{undefined:'fa-sort','asc':'fa-sort-asc','desc':'fa-sort-desc'}[o.sort]"></span>
                                </button>
                                <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                                        data-toggle="dropdown">
                                    <span class="fa fa-edit"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><input class="form-control" [(ngModel)]="o.alias" placeholder="{{'CONFIG.WIDGET.ALIAS'|translate}}"></li>
                                    <li *ngFor="let a of value_aggregate_types">
                                        <a (click)="o.aggregate_type=a.value">{{a.name+'('+o.col+')'}}</a>
                                    </li>
                                    <li>
                                        <a (click)="editVFilter(o)">{{'CONFIG.WIDGET.FILTER'|translate}}</a>
                                    </li>
                                </ul>
                            </div>
                        </ng-switch> -->
                    </div>
                </td>
                <td style="padding: 1px 3px">
                    <span class="text-red" style="display: block;margin-top: 7px;">
                        <i class="fa fa-trash-o" style="cursor: pointer;vertical-align: middle;"
                           (click)="deleteValue(v.cols);curWidget.config.values.splice($index, 1)"></i>
                    </span>
                </td>
            </tr>
        </table>
    </div>
</div>
